<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册表单</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style>
        form {
            width: 400px;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #f9f9f9;
        }

        label {
            margin-bottom: 5px;
        }

        input[type="text"],
        input[type="password"] {
            width: 100%;
            padding: 8px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }

        input[type="radio"],
        input[type="checkbox"] {
            margin-right: 5px;
        }

        select {
            width: 100%;
            padding: 8px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }

        input[type="submit"] {
            background-color: #007bff;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }

        input[type="submit"]:hover {
            background-color: #0056b3;
        }

        button {
            background-color: #007bff;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="app">
        <form>
            <label for="username">用户名:</label>
            <input type="text" id="username" name="username" v-model="username">
            <label for="password">密码:</label>
            <input type="password" id="password" name="password" v-model="password">
            <label for="confirmPassword">确认密码:</label>
            <input type="password" id="confirmPassword" name="confirmPassword" v-model="confirmPassword">
            <label for="nickname">昵称:</label>
            <input type="text" id="nickname" name="nickname" v-model="nickname">
            <label for="gender">性别:</label>
            <input type="radio" id="male" name="gender" value="男" v-model="sex">
            <label for="male">男</label>
            <input type="radio" id="female" name="gender" value="女" v-model="sex">
            <label for="female">女</label><br>
            <br>

            <label for="shengSelect">所属省份:</label>
            <select id="shengSelect" name="sheng" v-model="sheng">
                <option v-for="(item, index) in provinces" :value="item.name">{{ item.name }}</option>
            </select>

            <label for="shiSelect">所属城市:</label>
            <select id="shiSelect" name="shi" v-model="shi">
                <option v-for="(item, index) in shiList" :value="item.name">{{ item.name }}</option>
            </select>

            <label for="quSelect">所属区县:</label>
            <select id="quSelect" name="qu" v-model="qu">
                <option v-for="(item, index) in quList" :value="item.name">{{ item.name }}</option>
            </select>


            <label for="hobbies">兴趣爱好:</label>
            <input type="checkbox" id="climb" name="hobbies" value="爬山" v-model="hobbies">
            <label for="climb">爬山</label>
            <input type="checkbox" id="travel" name="hobbies" value="旅游" v-model="hobbies">
            <label for="travel">旅游</label>
            <input type="checkbox" id="read" name="hobbies" value="看书" v-model="hobbies">
            <label for="read">看书</label>
            <input type="checkbox" id="stargaze" name="hobbies" value="看星星" v-model="hobbies">
            <label for="stargaze">看星星</label><br>
            <button @click.prevent="add">提交</button>
        </form>
        <table border="1px">
            <thead>
                <tr>
                    <th>用户名</th>
                    <th>密码</th>
                    <th>昵称</th>
                    <th>性别</th>
                    <th>所属城市</th>
                    <th>兴趣爱好</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in users" :key="item.id">
                    <td>{{ item.username }}</td>
                    <td>{{ item.password }}</td>
                    <td>{{ item.nickname }}</td>
                    <td>{{ item.sex }}</td>
                    <td>{{ item.city }}</td>
                    <td>{{ item.hobbies }}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                users: [],
                username: '',
                password: '',
                confirmPassword: '',
                nickname: '',
                sex: '',
                city: '',
                hobbies: [],
                provinces: [
                    {
                        name: '北京',
                        cities: [
                            {
                                name: '北京市区',
                                districts: [
                                    { name: '东城区' },
                                    { name: '西城区' }
                                ]
                            },
                            {
                                name: '郊区',
                                districts: [
                                    { name: '延庆区' },
                                    { name: '密云区' }
                                ]
                            }
                        ]
                    },
                    {
                        name: '上海',
                        cities: [
                            {
                                name: '上海市区',
                                districts: [
                                    { name: '黄浦区' },
                                    { name: '徐汇区' }
                                ]
                            },
                            {
                                name: '周边',
                                districts: [
                                    { name: '浦东新区郊区' },
                                    { name: '青浦区' }
                                ]
                            }
                        ]
                    }
                ],
                sheng: '',
                shi: '',
                qu: '',
            },
            methods: {
                add() {
                    if (this.password!== this.confirmPassword) {
                        alert('两次密码输入不一致');
                        return;
                    }
                    this.users.push({
                        username: this.username,
                        password: this.password,
                        nickname: this.nickname,
                        sex: this.sex,
                        city: this.sheng + '-' + this.shi + '-' + this.qu,
                        hobbies: this.hobbies.join(',')
                    });
                    this.username = '';
                    this.password = '';
                    this.confirmPassword = '';
                    this.nickname = '';
                    this.sex = '';
                    this.sheng = '';
                    this.shi = '';
                    this.qu = '';
                    this.hobbies = [];
                }
            },
            computed: {
                shiList() {
                    const xuansheng = this.provinces.find(item => item.name === this.sheng);
                    return xuansheng? xuansheng.cities : [];
                },
                quList() {
                    const xuansheng = this.provinces.find(item => item.name === this.sheng);
                    const xuanshi = xuansheng? xuansheng.cities.find(item => item.name === this.shi) : null;
                    return xuanshi? xuanshi.districts : [];
                }
            }
        })
    </script>
</body>

</html>
    